<template>
	<div>
		<van-nav-bar
			title="订单详情"
			left-arrow
			@click-left="this.$router.go(-1)"
			fixed />
		<div style="height: 50px; width: 100vw"></div>
		<section class="aui-flexView">
			<!-- 订单详细 -->
			<section class="aui-scrollView">
				<!-- 订单状态 -->
				<div class="aui-pay-change">
					<div class="aui-flex">
						<div class="aui-flex-box">
							<h3>{{ orderInfo.status_text }}</h3>
						</div>
						<!--  -->
					</div>
				</div>

				<!-- 收货地址 -->
				<div class="aui-flex">
					<div class="aui-flex-add">
						<img
							:src="address.avatar_text"
							style="height: 100%; object-fit: cover" />
					</div>
					<div class="aui-flex-box">
						<h3>
							{{ address.nickname }} <em>{{ address.mobile }}</em>
						</h3>
						<p>{{ address.region }}</p>
					</div>
				</div>

				<!-- 订单商品 -->
				<div
					class="aui-commodity-bg"
					style="background: transparent"
					v-for="shop in shopList"
					:key="shop.id">
					<div style="margin-bottom: 10px; background: #f5f5f5">
						<div class="aui-flex">
							<div class="aui-commodity-img">
								<img :src="shop.product.thumb_swiper" />
							</div>
							<div class="aui-flex-box">
								<h4 class="van-ellipsis">商品名称: {{ shop.product.name }}</h4>
								<p>商品单价: {{ shop.price }}</p>
								<span class="aui-barter-time">七天退换</span>
							</div>
							<div>
								<h5>￥{{ shop.total }}</h5>
								<p class="aui-sml-text">x{{ shop.pronum }}</p>
							</div>
						</div>
						<div class="con">
							<div v-if="shop.comment">
								<p class="color">商品评价</p>
								<div class="comment">
									{{ shop.comment }}
								</div>
							</div>
							<div v-if="shop.rate">
								<p class="color">商品评分</p>
								<div class="comment" style="display: flex; align-items: center;justify-content: left;">
									<van-rate
										v-model="shop.rate"
										disabled 
										disabled-color="#ee0a24" /><span style="height: 100%;width: max-content;box-sizing: border-box;padding: 0 0 0 10px;">{{ shop.rate }}分</span>
								</div>
							</div>
							<div v-if="shop.proimg_text">
								<p class="color">晒图</p>
								<div class="img" style="padding: 10px; box-sizing: border-box;">
									<van-image
										v-for="(img, index) in shop.proimg_text"
										width="120"
										height="120"
										:key="index"
										:src="img"
										fit="cover"
										@click="ckImg(img)"></van-image>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 总价 -->
				<div class="aui-cp-edu b-line">
					<div class="aui-flex aui-flex-ed">
						<div
							class="aui-flex-box"
							style="color: #333; font-size: 15px">
							订单总价<em style="color: #333">￥{{ orderInfo.amount }}</em>
						</div>
					</div>
				</div>

				<div class="divHeight b-line"></div>

				<!-- 订单详细内容 -->
				<div class="aui-flex aui-flex-text-sml b-line orderinfo">
					<div class="aui-flex-box">
						<p>
							<em>订单号:</em>
							{{ orderInfo.code }}
						</p>
						<p v-if="orderInfo.express">
							<em>配送物流:</em>
							{{ orderInfo.express.name || "" }}
						</p>
						<p>
							<em>物流单号:</em>
							{{ orderInfo.expresscode }}
						</p>
						<p>
							<em>下单时间:</em>
							{{ orderInfo.createtime }}
						</p>
						<p>
							<em>订单状态:</em>
							{{ orderInfo.status_text }}
						</p>
						<p>
							<em>订单描述:</em>
							{{ orderInfo.remark }}
						</p>
					</div>
				</div>
			</section>

			<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>

			<!-- <footer class="aui-footer aui-footer-fixed">
                <div class="aui-footer-text-info">
                    <a href="javascript:;" class="aui-payment">申请退货</a>
                </div>
                <div class="aui-footer-text-info">
                    <a href="javascript:;" class="aui-payment" v-if="orderInfo.status > 2">确认收货</a>
                </div>
                <div class="aui-footer-text-info" @click="appraise">
                    <a href="javascript:;" class="aui-payment">评价</a>
                </div>
            </footer> -->
		</section>

		<van-overlay
			:show="isImg"
			@click="isImg = false"
			class-name="ckImg">
			<van-image
				width="100vw"
				:src="src"
				fit="cover"
				@click="ckImg"></van-image>
		</van-overlay>
	</div>
</template>

<script>
	export default {
		created() {
			this.info(this.$route.query.id);
		},
		data() {
			return {
				shopList: [],
				orderInfo: {},
				address: {},
				isImg: false,
				// 处理图片点击的渲染
				src: "",
				isLoading: false,
			};
		},
		methods: {
			async info(id) {
				this.isLoading = true;
				let res = await this.$api.OrderInfo({
					id,
					busid: this.$cookies.get("User").id,
				});

				if (res.code == 1) {
					this.shopList = res.data[1];
					this.address = res.data[0].business;
					this.orderInfo = res.data[0];
				} else {
					showFailToast({ message: res.msg });
				}

				this.isLoading = false;
			},
			appraise() {
				this.$router.push({ path: "/business/orderappraise", query: { id: this.$route.query.id } });
			},
			ckImg(src) {
				this.src = src;
				this.isImg = true;
			},
		},
	};
</script>

<style scoped>
	@import url("/assets/css/orderinfo.css");

	.img {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.img > div > img {
		object-fit: cover;
		margin-right: 10px;
	}

	.ckImg {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.comment {
		padding: 10px;
	}

	.color {
		font-size: 14px;
		color: orange;
	}
</style>
